<!-- 
    @file: 留言
    @auth: lizibin
 -->
<template>
    <div class="message_box">
        <div class="titleWrapper">
            <h3 class="title"><b>留言</b></h3>
        </div>

        <el-row :gutter="20">
            <el-col :span="24">
                <p>◎ 欢迎参与讨论，请在这里发表您的看法和观点。留言头像采用“腾讯QQ”的头像</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-input v-model="state.message.name" size="large" placeholder="昵称" />
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <el-input v-model.number="state.message.qq" size="large" placeholder="QQ号" />
            </el-col>
            <el-col :span="24">
                <el-input v-model="state.message.content" :autosize="{ minRows: 4, maxRows: 5 }" type="textarea"
                    placeholder="留言内容" maxlength="50" />
            </el-col>
            <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
                <el-input v-model="state.message.code" size="large" placeholder="验证码">
                    <template #append>
                        <VerificationCode ref="player" @getVerificationCode="getVerificationCode" title="看不清？点击换一张">
                        </VerificationCode>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="24" :sm="6" :md="6" :lg="6" :xl="6">
                <el-button color="#2fa7b9" plain size="large" style="width:100%;text-align: right;" @click="submit">发布留言
                </el-button>
            </el-col>
        </el-row>
    </div>

    <div class="message_content" v-loading="state.loading" element-loading-text="玩命加载中...">
        <div class="titleWrapper">
            <h3 class="title"><b>最新留言</b></h3>
        </div>
        <div>
            <ul>
                <li class="item" v-for="item in state.messageInfo">
                    <div class="userInfo">
                        <img :src="item.messageQQ" alt="">
                        <font># {{ item.messageName }}</font>
                        <l>{{ item.messageDate }}</l>
                        <span @click="reply(item.messageId, item.replyContent)" class="operation">
                            <span v-if="state.userInfo.userType === 0 && item.messageId !== state.replyId">
                                <el-icon>
                                    <ChatDotSquare />
                                </el-icon>
                                <span v-if="item.replyContent == '' || item.replyContent == null">回复</span>
                                <span v-else>编辑回复</span>
                            </span>
                            <span v-if="state.userInfo.userType === 0 && item.messageId === state.replyId">
                                <el-icon>
                                    <ChatDotSquare />
                                </el-icon>
                                取消回复
                            </span>
                        </span>
                        <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="Delete"
                            icon-color="#F56C6C" confirm-button-type="danger" :title="'确定删除该评论吗？'"
                            @confirm="deleteMessage(item.messageId)">
                            <template #reference>
                                <span v-if="state.userInfo.userType === 0" class="operation">
                                    <el-icon>
                                        <Delete />
                                    </el-icon>
                                    删除
                                </span>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div class="commentGroup">
                        <p class="detailText">{{ item.content }}</p>
                    </div>

                    <div v-show="item.messageId === state.replyId" class="comment_reply_box">
                        <el-row :gutter="20">
                            <el-col :span="20">
                                <el-input v-model="state.replyContent" maxlength="100" size="large"
                                    :placeholder="'回复@' + item.messageName + ':'" show-word-limit />
                            </el-col>
                            <el-col :span="4">
                                <el-button plain color="#2fa7b9" size="large" style="width: 100%;"
                                    @click="submitReply(item.messageId)">提交
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>

                    <div class="otherInfo" v-if="item.replyContent !== null && item.replyContent !== ''"><strong
                            style="color:#2FA7B9">小李</strong>：{{ item.replyContent }}</div>
                </li>
            </ul>
        </div>
        <el-pagination class="showPaging" background layout="prev, pager, next" :total="state.total"
            :page-size="state.pageSize" @current-change="changePage" v-model:currentPage="state.currentPage"
            :pager-count="3" :hide-on-single-page="true" />
        <el-pagination class="hidePaging" background layout="prev, pager, next, jumper" :total="state.total"
            :page-size="state.pageSize" @current-change="changePage" v-model:currentPage="state.currentPage"
            :pager-count="3" :hide-on-single-page="true" />
    </div>
</template>
<script lang="ts" setup>
// 验证码组件
import VerificationCode from '@/components/login/verification-code/verificationCode.vue'

import {
    reactive,
    ref,
    unref,
    onMounted,
} from 'vue'
import { FormatDate } from '@/utils/time'

import {
    ElNotification,
    ElMessage
} from 'element-plus'
import {
    Delete
} from '@element-plus/icons-vue'
import { GetMessage } from '@/api/foreground/index'
import { useStore } from '@/store/index'
import { storeToRefs } from 'pinia'
import { State } from '@/types/about'
import { InsertMessage, DeleteMessage, ReplayMessage } from '@/api/foreground/index'
const Store = useStore()
const { LoginInfo } = storeToRefs(Store)
const { data: LoginData } = LoginInfo.value;
const player = ref();

/**
 * @desc 加载获取数据
 */
const loadData = (state: State) => {
    state.loading = true;
    const params = {
        currentPage: state.currentPage,
        pageSize: state.pageSize,
    }
    GetMessage(params).then(res => {
        // 先清空数据
        state.messageInfo = [];
        res.data.list.forEach(element => {
            // 时间戳格式化
            element.messageDate = FormatDate(element.messageDate);
            // 头像采用qq的
            element.messageQQ = 'https://q2.qlogo.cn/headimg_dl?dst_uin=' + element.messageQQ +
                '&spec=100'
            // 添加
            state.messageInfo.push(element)
        });

        //JSON.parse 将从后台得到的数据转换为标准JSON格式
        //前台展示的是需要数组，JSON.parse转换后的数据，element-plus可以解析
        // state.tableData = res.data.data.list;
        state.total = res.data.total;
        state.pageSize = res.data.pageSize;
        state.currentPage = res.data.currentPage;
        state.loading = false;
    })
}


// 获取当前登录的用户信息
// 子组件的方法
//挂载后加载数据
onMounted(() => {
    loadData(state);
    if (LoginData) {
        state.userInfo = LoginData.data[0];
    }
});
const state = reactive<State>({
    // 当前登录信息
    userInfo: {
        userEmail: '',
        userIcon: '',
        userPass: '',
        userRegdate: '',
        userSignature: '',
        userId: -1,
        userType: -1,
        userName: '',
    },
    mode: import.meta.env.MODE,
    // 留言内容
    message: {
        name: '',
        qq: '',
        content: '',
        code: ''
    },
    // 随机生成的验证码
    verificationCode: '',
    // 留言信息
    messageInfo: [],
    // 回复内容
    replyContent: '',
    // 回复状态
    replyId: 0,
    total: 0, //总条数
    pageSize: 5, //每页显示行数
    currentPage: 1, //当前页码
    loading: false, // 加载
})

// 接收子组件（验证码）传的值
const getVerificationCode = (codeList: string) => {
    state.verificationCode = codeList;
};

// 切换页面的执行事件，  val 当前页码
const changePage = (val: number) => {
    state.currentPage = val;
    loadData(state);
};

// 发布评论
const submit = () => {
    // 判断内容是否填写完整
    if (state.message.name == '' || state.message.qq == '' || state.message.content == '' || state
        .message.code == '') {
        ElMessage.error('将内容填写完整，表达你的态度再评论吧！')
    } else {
        // 判断验证码是否输入正确
        if (state.message.code.toLowerCase() !== state.verificationCode.toLowerCase()) {
            ElMessage.error('验证码有误，请重新输入！')
        } else {
            const params = {
                messageName: state.message.name, // 留言昵称
                messageQQ: state.message.qq, // 留言QQ
                content: state.message.content, // 留言内容
            }

            InsertMessage(params).then((res) => {
                if (res.code == 0) {
                    // 清空内容
                    state.message = {
                        name: '',
                        qq: '',
                        content: '',
                        code: ''
                    }
                    // 刷新留言
                    loadData(state)
                    // 调用子组件方法（更新验证码）refreshCode
                    unref(player).refreshCode();
                    ElMessage({
                        message: '留言成功，感谢支持.',
                        type: 'success',
                    })
                }
            })
        }
    }
}

// 留言三种点击清空
const reply = (id: string | number, replyContent: any) => {
    if (state.replyId === id) {
        state.replyId = false;
    }
    // 当前留言回复没有关闭又点击其他回复时
    else if (state.replyId !== id && state.replyId !== false) {
        state.replyId = id
        state.replyContent = replyContent
    } else { // 为false时
        state.replyId = id
        state.replyContent = replyContent
    }
}

// 提交回复留言
const submitReply = (messageId: string | number) => {
    if (state.replyContent !== "") {
        const params = {
            messageId: messageId, // 回复留言id
            replyContent: state.replyContent // 回复内容
        }
        ReplayMessage(params).then(res => { // 回复成功
            if (res.code == 0) {
                // 清除内容
                state.replyContent = ""
                state.replyId = false
                ElMessage({
                    message: '留言回复成功.',
                    type: 'success',
                })
                // 刷新评论数据
                loadData(state);
            } else {
                ElMessage.error('回复失败')
            }

        })
    } else {
        ElMessage.error('回复内容不能为空哦~')
    }
}

// 删除留言
const deleteMessage = (messageId: string | number) => {
    const params = {
        messageId: messageId
    }
    DeleteMessage(params).then(res => { // 删除成功
        if (res.code == 0) {
            ElMessage({
                message: '留言删除成功.',
                type: 'success',
            })
            // 刷新评论数据
            loadData(state);
        } else {
            ElMessage.error('删除失败')
        }
    })
}
</script>

<style scoped>
.main_content,
.message_box,
.message_content {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: white;
    padding: 25px;
    line-height: 30px;
    color: #474749;
    border-radius: 10px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.message_box .titleWrapper,
.message_content .titleWrapper {
    margin-bottom: 15px;
    margin-top: -10px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

.message_box b,
.message_content b {
    display: inline-block;
    border-bottom: 4px solid #2FA7B9;
}

.content_box {
    width: 100%;
}

.content_box>h4 {
    margin-left: 10px;
}

.content_box>p {
    text-indent: 2em;
    line-height: 35px;
}

.content_title>h3 {
    font-size: 20px;
    font-weight: 700;
    padding-left: 10px;
    margin: 15px 0;
    border-left: 4px solid #2FA7B9;
}

.message_box .el-col {
    margin-bottom: 20px;
}

:deep(.el-input-group__append, .el-input-group__prepend) {
    background: white;
}

.message_box p {
    font-size: 14px;
    color: #666;
}

.message_content .userInfo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.message_content .userInfo img {
    width: 40px;
    border-radius: 50px;
    margin-right: 10px;
}

.message_content .userInfo>font {
    font-size: 15px;
    color: #333;
}

.message_content .userInfo>l {
    font-size: 12px;
    color: #999;
    margin: 0 10px;
}

.message_content .commentGroup {
    padding: 15px;
    border-radius: 4px;
    background: #f6f6f6;
    overflow: hidden;
}

.message_content .detailText {
    line-height: 20px;
    font-size: 13px;
    color: #666;
}

.message_content .otherInfo {
    font-size: 13px;
    color: #666;
    line-height: 18px;
    margin-top: 10px;
    word-break: break-all;
}

.message_content .item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.comment_reply_box {
    width: 100%;
    margin: 15px 0;
}

.message_content .operation {
    cursor: pointer;
    color: #777777;
    font-size: 12px;
    margin-right: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.message_content .operation span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.message_content .operation .el-icon {
    margin-right: 5px;
}

/* 分页样式 */
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background-color: #2fa7b9;
}

.el-pagination {
    margin-top: 20px;
    justify-content: center;
}

:deep(.el-table .cell) {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
}


@media screen and (max-width: 500px) {
    .hidePaging {
        display: none;
    }
}

@media screen and (min-width: 500px) {
    .showPaging {
        display: none;
    }
}
</style>